<template>
	<view class='login-other'>
		<view class='other-text'>
			<view>或者用以下方式登录</view>
		</view>
		<view class='other'>
			<view class='other-item' @tap='loginOther("weixin")'>
				<image src="../../static/img/wx.png" mode=""></image>
				<view>微信登录</view>
			</view>
			<view class='other-item' @tap='loginOther("sinaweibo")'>
				<image src="../../static/img/wb.png" mode=""></image>
				<view>微博登录</view>
			</view>
			<view class='other-item' @tap='loginOther("qq")'>
				<image src="../../static/img/qq.png" mode=""></image>
				<view>QQ登录</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loginother
	} from "@/api/login.js"
	import {
		mapMutations
	} from 'vuex';
	export default {
		methods: {
			...mapMutations(['login']),
			loginOther(mode) {
				// 需要配置manifest.josn添加appid，appserver都需要企业账号申请
				// uni.login({
				// 	provider: mode,
				// 	success: (res) => {
				// 		uni.getUserInfo({
				// 			provider: mode,
				// 			success: async (res) => {
				// 				let provider = mode;
				// 				//openid==》用户身份
				// 				let openid = res.userInfo.openId || res.userInfo.openid;
				// 				let nickName = res.userInfo.nickName;
				// 				let avatarUrl = res.userInfo.avatarUrl;

				// 				let result = await loginother({
				// 					provider,
				// 					openid,
				// 					nickName,
				// 					avatarUrl
				// 				})
				// 				this.login(result);
				// 				uni.navigateBack({
				// 					delta: 1
				// 				})
				// 			}
				// 		})
				// 	}
				// })
			}
		}
	}
</script>

<style scoped>
	/*  其他登录方式  */
	.login-other {
		padding: 100rpx 0;
	}

	.other-text {
		display: flex;
		padding: 50rpx 0;
	}

	.other-text view {
		line-height: 0rpx;
		padding: 0 10rpx;
	}

	.other-text:after {
		flex: 1;
		content: '';
		height: 2rpx;
		background-color: #CCCCCC;
	}

	.other-text::before {
		flex: 1;
		content: '';
		height: 2rpx;
		background-color: #CCCCCC;
	}

	.other {
		display: flex;
		justify-content: space-around;
	}

	.other-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.other-item image {
		width: 80rpx;
		height: 80rpx;
	}

	/*  其他登录方式  end  */
</style>
